<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>参与投票</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="js/vote.js"></script>
</head>
<body>
<div id="app">
	<app>
		<div id="vote" class="wrap">
			<h2>参与投票</h2>
			<ul class="list">
				<li>
					<h4>{{vote.vname}}</h4>
					<p class="info">共有 {{vote.items.length}} 个选项，
						已有 {{vote.users}} 个网友参与了投票。</p>
					<form method="post" action="Vote!save.action">
						<input type="hidden" name="entityId" value="103"/>
						<ol>
							<li v-for=" i in vote.items">
								<input type="checkbox" v-model="records" :value="i.id"/>
								{{i.iname}}
							</li>
						</ol>
						<p class="voteView">
							<input type="image" @click.prevent="commit()" src="images/button_vote.gif" />
							<a :href="'view.html?id=' + vote.id"><img src="images/button_view.gif" /></a></p>
					</form>
				</li>
			</ul>
		</div>
	</app>
</div>
<script>
	var v = new Vue({
		el:"#app",
		data : {
			vote:{items:[]},
			all: 0,
			records : []
		},
		created(){
			axios.get("FindVoteServlet"+location.search).then(res=> {
				this.vote = res.data;
				this.vote.items.forEach(i=>{
					this.all += i.nums;
				})
			});
		},
		methods:{
			commit(){
				let p = new URLSearchParams();
				p.append("vid",this.vote.id);
				this.records.forEach(r=>{
					p.append("iids", r);
				})
				axios.post("vote", p).then(res=>{
					if(res.data.code){
						alert("投票成功!");
						location.href = "view.html?id=" + this.vote.id;
					} else {
						alert(res.data.msg);
					}
				})
			}
		}
	})
</script>
</body>
</html>
